<template>
  <!-- 求购 -->
  <div class="content">
    <div class="nav">
      <span>房产类型</span>
      <span>区域选择</span>
    </div>
    <div class="main">
      <div v-for="(item, index) in list" :key="index">
        <div class="main_top" @click="rentDetail(item.id)">
          <p>
            <span>
              <img :src="item.prelogo" alt="" />
              <span style="padding: 60rpx 40rpx">{{ item.cname }}</span>
            </span>
            <span style="font-size: 28rpx; padding-right: 60rpx">{{
              item.begintime
            }}</span>
          </p>
          <p>{{ item.title }}</p>
        </div>
        <div class="main_bottom">
          <span
            >意向区域:
            <span style="font-weight: 900"> {{ item.areaname }}</span></span
          >
          <span
            >意向价格:<span style="color: red">{{ item.qgprice }}元/月</span>
          </span>
          <span style="color: red"
            ><i
              class="iconfont icon-dianhua"
              style="font-size: 60rpx; margin-top: -20rpx"
            ></i
          ></span>
          <span style="color: red"
            ><i
              class="iconfont icon-duanxin"
              style="font-size: 60rpx; margin-top: -20rpx"
            ></i
          ></span>
        </div>
      </div>
    </div>
    <footer>没有更多数据了</footer>
  </div>
</template>

<script>
import "../../../g_icon/rent/iconfont.css";
import { getBuy } from "../../../mock/zuFang/index";
export default {
  data() {
    return {
      list: [],
    };
  },
  async onShow() {
    this.list = getBuy();
  },
};
</script>

<style>
.content {
  width: 100%;
  height: 100%;
}
header {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: 100rpx;
  font-size: 45rpx;
}
.nav {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: space-around;
  line-height: 80rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #ccc;
}
.main {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #eee;
}
.main > div {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;
  background: #fff;
}
.main_top {
  width: 100%;
  height: 240rpx;
  margin: 50rpx 20rpx;
  border-bottom: 1rpx solid #ddd;
}
.main_bottom {
  display: flex;
  justify-content: space-around;
  font-size: 30rpx;
  padding: 0 10rpx;
  margin-bottom: 35rpx;
}
.main_top > p {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  line-height: 80rpx;
}
.main_top > p:first-child {
  display: flex;
  justify-content: space-between;
  margin: 0 20rpx;
}
/* .main_top >p:first-child >span:last-child{
  padding-right: 30rpx;
} */
.main_top > p:last-child {
  margin-top: 40rpx;
}
.main_top > p > span:first-child img {
  width: 85rpx;
  height: 85rpx;
  border-radius: 50rpx;
}
footer {
  width: 100%;
  height: 60rpx;
  background: #eee;
  text-align: center;
  line-height: 50rpx;
}
</style>